<template>
  <div class="bg">
<el-button class='bacToIndex' size="mini" @click="backtoIndex">返回首页</el-button>    <div class='title'>楼宇查询</div>
    <div class='search'>
      <div>
        所属楼宇:
        <!-- <el-input v-model="input1"></el-input> -->
        <el-select v-model="value1" filterable >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.buildingName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div>
        所属楼层:
        <el-select v-model="value2" filterable >
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.floorName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div>
        房间名称:
        <el-select v-model="value3" filterable >
          <el-option
            v-for="item in options3"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div>
        租赁状态: 
        <span :class="status != 'YES' ? 'have' : 'notHave'" @click="status ='YES'">已租</span>
        <span :class="status != 'NO' ? 'have' : 'notHave'" @click="status ='NO'">未租</span>
      </div>
    </div>
    <div class='searchBtn'>
      <el-button type="primary" @click="search">查 询</el-button>
      <el-button type="default" @click="empty">清 空</el-button>
    </div>
    <div class='content' v-for="(item, index) in list" :key='index'>
      <h3>{{item.name}}</h3>
      <div class='cardBox'>
        <el-row :gutter="10" type="flex" style="flex-wrap: wrap">
          <el-col :md='6' :lg="4" v-for="(item2, index2) in item.list" :key="index2">
            <!-- {{item2}} -->
            <div class="item" :class="item2.status ? 'empty' : ''">
              <div class='img' v-if="item2.status" >
                <img src="../../assets/house2.png" alt="">
                <span style="color: #333; text-align: center; font-size: 14px;">{{item2.enterprise}}</span>
              </div>
             <div class='img' v-else >
              <img src="../../assets/house.png" alt="">
              <span style="color: #333; text-align: center;">{{item2.enterprise}}</span>
             </div>
              
              <div class='intro'>
                <span class='room'>{{item2.room}}</span>
                <span>{{item2.area}}㎡</span>
                <!-- <span>¥{{item2.price}}元/㎡/月</span> -->
              </div>
              
            </div>
            
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { GetBuilding, GetBuildingDetail, GetRoom, GetAllItem } from '../../api/city.js'

export default {
  
  data() {
    return {
      // list: [
      //   {
      //     name: '大学科技园2楼',
      //     list1: [
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //         status: true,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },        
      //     ]
      //   },
      //   {
      //     name: '大学科技园3楼',
      //     list1: [
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //         status: true,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //         status: true,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //       {
      //         room: 201,
      //         area: 300,
      //         price: 26,
      //       },
      //     ]
      //   },
      // ],
      list: [],
      options1: [],
      options2: [],
      options3: [],
      value1: '',
      value2: '',
      value3: '',
      label1: '',
      label2: '',
      label3: '',
      status: '',
    }
  },
  watch: {
    value1(newval, oldval) {
      console.log(newval, oldval)
      if(newval !== oldval) {
        // this.options2.length = 0;
        this.value2 = '';
        let buildingId = newval
        GetBuildingDetail(buildingId).then(res => {
          console.log(res, 'res')
          this.options2 = res.data.data;
          
        })
      }
    },
    value2(newval, oldval) {
      console.log(newval, oldval)
      if(newval !== oldval) {
        // this.options3.length = 0;
        this.value3 = '';
        const params = {
          buildingId: this.value1,
          buildingDetailId: newval
        }
        GetRoom(params).then(res => {
          console.log(res, 'res')
          this.options3 = res.data.data
          
        })
      }
    }
  },
  methods: {
    backtoIndex() {
      this.$router.push({ path: '/solution' })
    },
    search() {
      const params = {
        buildingId: this.value1,
        buildingDetailId: this.value2,
        roomId: this.value3,
        status: this.status
      }
      GetAllItem(params).then(res => {
        
        this.list = res.data.data
        console.log(res, this.list, 'res')
        
      })
    },
    empty() {
      this.value1 = '';
      this.value2 = '';
      this.value3 = '';
      this.status = ''
      this.search()
    },
  },
  created() {
    GetBuilding().then(res => {
      console.log(res, 'res')
      this.options1 = res.data.data
    })
    this.search()
  },
}
</script>

<style scoped  lang="less">
.bacToIndex {
  position: absolute;
  margin: 10px 30px;
  background-color: #001e69;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
//   border: 1px solid red;
}
.bg {
  background-color: #e6e6e6;
  min-height: 100vh;
  color: #fff;
  font-weight: bold;
  .title {
    background-color: #1b61db;
    text-align: center;
    font-size: 2rem;
    padding: 20px;
  }
  .searchBtn {
    background-color: #1b61db;
    text-align: center;
    
    padding: 10px;
    .el-button {
      font-size: 1rem;
    }
  }
  .search {
    background-color: #1b61db;
    font-size: 1.2rem;
    padding: 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid red;
    div {
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      align-items: center;
      padding: 5px;
      .el-input {
        width: 200px;
      }
      span {
        cursor: pointer;
        background-color: #fff;
        border-radius: 5px;
        padding: 0px 15px;
        margin: 0 3px;
      }
      .have {
        color: #1b61db;
      }
      .notHave {
        background-color: #fdb82f;
      }
    }
  }
  .content {
    color: #333;
    h3 {
      margin-left: 100px;
    }
    .cardBox {
      margin: 0 auto;
      margin: 0 50px;
      padding: 20px 50px;
      border: 5px;
      background-color: #fff;
      border-radius: 5px;
      .item {
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #1b61db;
        border-radius: 5px;
        box-shadow: 1px 1px 2px #6e94d4;
        padding: 10px 5px;
        margin: 10px 20px;
        .img {
          width: 50%;
          height: 50px;
          margin-right: 10px;
          justify-content: center;
          align-items: center;
          img {
            width: 50px;
          }
        }
        .intro {
          width: 50%;
        }
        div {
          color: #3570de;
          display: flex;
          flex-direction: column;
          line-height: 1.6rem;
          .room {
            color: #333;
          }
        }
      }
      .item.empty {
        border: 2px solid #fdb82f;
        box-shadow: 1px 1px 2px #f1d294;
         div {
          color: #fdb82f;          
         }
      }
    }
  }
}
</style>
